<!--
 * @Author: wuzhen
 * @Date: 2020-01-02 09:36:39
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-06 17:58:13
 * @Description:用户详情
 -->
<template>
  <div class="details-info">
    <div class="details-info-item">
      <h2>基本信息</h2>
      <Row :gutter="32">
        <Col span="8">
        <div class="flex item-info">
          <label>用户昵称：</label>
          <div class="flex-item text">{{dataInfo.username}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>手机号码：</label>
          <div class="flex-item text">{{dataInfo.mobile}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>用户ID：</label>
          <div class="flex-item text">{{dataInfo.userid}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>性别：</label>
          <div class="flex-item text">{{dataInfo.gender===4?'女':dataInfo.gender===2?'男':'未知'}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>生日：</label>
          <div class="flex-item text">{{dataInfo.birthday || '--'}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>注册时间：</label>
          <div class="flex-item text">{{$fmtMoment(dataInfo.createtime)}}</div>
        </div>
        </Col>
        <Col span="24">
        <div class="flex item-info">
          <label>个性签名：</label>
          <div class="flex-item text">{{dataInfo.personlsign || '--'}}</div>
        </div>
        </Col>
      </Row>
    </div>
    <div class="details-info-item">
      <h2>其他信息</h2>
      <Row :gutter="32">
        <Col span="8">
        <div class="flex item-info">
          <label>好友个数：</label>
          <div class="flex-item text">{{dataInfo.totalfriends}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>创建群：</label>
          <div class="flex-item text">{{dataInfo.totalgroups}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>加入群：</label>
          <div class="flex-item text">{{dataInfo.totaljoingroups}}</div>
        </div>
        </Col>
        <Col span="8">
        <div class="flex item-info">
          <label>被举报次数：</label>
          <div class="flex-item text">{{dataInfo.totalcomplaint}}<span @click="onReport" v-if="dataInfo.totalcomplaint > 0">查看</span></div>
        </div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { getUserDetail } from "@/request/api";
export default {
  data() {
    return {
      dataInfo: {}
    };
  },
  methods: {
    async getData(id) {
      try {
        const res = await getUserDetail({
          userid: id
        });
        this.dataInfo = res.result;
      } catch (error) {
        throw error;
      }
    },
    onReport() {
      this.$emit("on-report");
    }
  }
};
</script>
<style lang="less" scoped>
.text {
  span {
    text-decoration: underline;
    cursor: pointer;
    color: #2d8cf0;
    margin-left: 20px;
  }
}
</style>